<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩配置</title>
    <link href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
</head>
<body>
<div class="panel">
    <div class="panel-body">
        <div style="float: right">
            登录用户：<span  th:text="${session.user.name}"></span>
        </div>
        <h1 class="page-header" id="header"></h1>
        <div id="toolbar" class="btn-group">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#addGradeConfigModal">
                <span class="fa fa-plus" aria-hidden="true"></span> 添加成绩配置
            </button>

            <button type="button" class="btn btn-danger btn-xs" onclick="window.location.href='/logout'">
                <i class="fa fa-sign-out fa-fw"></i> 退出
            </button>
        </div>
        <div class="col-sm-12">
            <table id="table"></table>
        </div>
    </div>
</div>

<div id="addGradeConfigModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加成绩配置项</h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">成绩名称</label>
                        <div class="col-sm-8">
                            <input id="name" class="form-control" type="text" placeholder="例如：考勤成绩">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">成绩分值</label>
                        <div class="col-sm-8">
                            <input id="totalGrade" class="form-control" type="text" placeholder="100">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">成绩占比</label>
                        <div class="col-sm-8">
                            <input id="gradePercent" class="form-control" type="text" placeholder="30（表示占比30%）">
                        </div>
                    </div>



                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="addGradeConfig" type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

<script src="/static/util.js"></script>
<script src="/static/jquery/jquery.min.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="/static/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/static/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<script>

    $(function () {

        const data = new Data();
        data.init();

        const table = $('#table');

        const tableData = new TableData(table);
        tableData.init();

        const buttonGroup = new ButtonGroup(tableData);
        buttonGroup.init();

    });

    const Data = function () {
        const object = {};

        object.init = function () {
            sendGetAjax('/api/course/info?courseId=' + getQueryString('id'), function (res) {
                $('#header').text(res.data.courseName + "的成绩配置");
            })
        };

        return object;
    };

    const TableData = function (table) {
        const object = {};

        object.init = function () {
            tableInit({
                table: table,
                url: '/api/course/grade/all?courseId='+ getQueryString('id'),
                columns: object.columns,
                sidePagination: 'server',
                queryParams: object.queryParams
            });
        };

        object.columns = [{
            title: '编号',
            field: 'id'
        }, {
            title: '成绩名称',
            field: 'name'
        }, {
            title: '成绩分值',
            field: 'totalGrade'
        },{
            title: '成绩占比(%)',
            field: 'gradePercent'
        }, {
            title: '创建时间',
            field: 'createTime'
        }, {
            title: '操作',
            clickToSelect: false,
            formatter: function (val, row, index) {
                return '<button id="delete" type="button" class="btn btn-danger btn-xs">删除</button>';
            },
            events: {
                'click #delete': function (e, value, row, index) {
                    if (confirm('确认删除'+row.name)) {
                        sendPostAjax('/api/course/grade/delete', {id: row.id}, function (res) {
                            window.location.reload();
                        })
                    }
                }
            }
        }];

        object.queryParams = function (params) {
            return {
                size: params.pageSize,
                page: params.pageNumber - 1
            };
        };

        object.refresh = function () {
            tableRefresh({table: table});
        };

        return object;
    };

    const ButtonGroup = function (data) {
        const object = {};

        object.init = function () {
            $('#addGradeConfig').click(function () {
                const name = $('#name').val();
                const totalGrade = $('#totalGrade').val();
                const gradePercent = $('#gradePercent').val();
                if (name === '') {
                    alert('请填写成绩配置名');
                    return false;
                }
                if (totalGrade === '') {
                    alert('请填写成绩分值');
                    return false;
                }
                if (gradePercent === '') {
                    alert('请填写成绩占比');
                    return false;
                }
                sendPostAjax('/api/course/grade/add', {
                    courseId: getQueryString('id'),
                    name: name,
                    totalGrade: totalGrade,
                    gradePercent: gradePercent,
                }, function (res) {
                    window.location.reload();
                })
            });
        };
        return object;
    };
</script>

</body>
</html>